<!DOCTYPE html>
<html lang="zh">
 <head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>拖拽和缩放</title>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/newmap.js"></script>
<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
<link href="css/style.css" rel="stylesheet">
</head>

 <body>
<!-- 中间区域 -->
<div class="middleBox">
   <div class="mainTitleBox"> 拖拽和缩放 </div>
   <div id="div" onmousewheel="return bbimg(this)">
    <!-- 点击缩小放大 -->
    <a class="glyphicon glyphicon-zoom-in postA" onclick="amplify(1)"></a> <a class="glyphicon glyphicon-zoom-out postA" style="top:39px;" onclick="amplify(2)"></a> <img id="img"  border="0" src="images/test.png" /> </div>
 </div>
</body>
 </html>
<script>

 //获取相关CSS属性
var getCss = function(o,key){
    return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};
//拖拽的实现
var startDrag = function(bar, target, callback){
    if(getCss(target, "left") !== "auto"){
        params.left = getCss(target, "left");
    }
    if(getCss(target, "top") !== "auto"){
        params.top = getCss(target, "top");
    }
    //o是移动对象
    bar.onmousedown = function(event){
        params.flag = true;
        if(!event){
            event = window.event;
            //防止IE文字选中
            bar.onselectstart = function(){
                return false;
            }
        }
        var e = event;
        params.currentX = e.clientX;
        params.currentY = e.clientY;
    };
    document.onmouseup = function(){
        params.flag = false;
        if(getCss(target, "left") !== "auto"){
            params.left = getCss(target, "left");
        }
        if(getCss(target, "top") !== "auto"){
            params.top = getCss(target, "top");
        }
    };
    document.onmousemove = function(event){
        var e = event ? event: window.event;

        if(params.flag){
            var nowX = e.clientX, nowY = e.clientY;
            var disX = nowX - params.currentX, disY = nowY - params.currentY;
            target.style.left = parseInt(params.left) + disX+ "px";
            target.style.top = parseInt(params.top) + disY+ "px";

            if (typeof callback == "function") {
                callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
            }

            if (event.preventDefault) {
                event.preventDefault();
            }
            return false;
        }


    }
};

startDrag(document.getElementById("img"),document.getElementById("img"))






 $("#img").hover(function(){
    jQuery(document.body).css({
            "overflow-x":"hidden",
            "overflow-y":"hidden"
            });
},function(){
    jQuery(document.body).css({
            "overflow-x":"auto",
            "overflow-y":"auto"
            });
});


 </script>